@use "../../variables.scss" as *;

.spg-theme-builder-root {
  .sv-skeleton-element {
    min-height: 50px;
  }

  .spg-paneldynamic__separator {
    border: none;
    margin: 0;
    height: calcSize(1);
  }
  .spg-paneldynamic__footer {
    .spg-paneldynamic__separator {
      display: none;
    }
  }
  .spg-paneldynamic__buttons-container {
    display: flex;
    justify-content: center;
    .spg-action-bar {
      margin: 0;
    }
  }

  .spg-panel__footer {
    justify-content: center;
    margin: calcSize(1) 0 0 0;
    padding: 0;
  }
  .spg-panel__content .spg-row.spg-row {
    animation: none;
  }

  .spg-paneldynamic__add-btn {
    margin: 0 auto;
  }

  .spg-row--multiple {
    .spg-spin-editor {
      .spg-input-container__buttons-container {
        display: none;
      }
    }

    & > div {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: calc(50% - #{$base-unit} * 0.5);
      min-width: auto;

      input {
        min-width: 0;
      }

      .spg-question--location--left {
        box-sizing: border-box;

        .spg-input {
          height: auto;
        }
      }
    }
  }

  .sv-button-group {
    overflow: hidden;
  }

  //2 level nested
  .spg-panel-by-page,
  .spg-nested-panel {
    padding-bottom: calcSize(5);

    &::after {
      content: " ";
      display: block;
      position: relative;
      left: calcSize(-4);
      top: calc(5 * #{$base-unit});
      width: calc(8 * #{$base-unit} + 100%);
      height: 1px;
      background-color: var(--ctr-editor-border-color, var(--sjs-border-10, #dcdcdcff));
    }
  }

  .spg-panel-by-page__content > .spg-row:first-of-type,
  .spg-nested-panel__content > .spg-row:first-of-type {
    margin-top: 0;
  }

  .spg-panel-by-page.spg-panel--hidden-border,
  .spg-row:last-of-type > div > .spg-panel-by-page,
  .spg-paneldynamic__panel-wrapper > .spg-nested-panel,
  .spg-row:last-of-type > div > .spg-nested-panel {
    padding-bottom: 0;

    &::after {
      content: none;
    }
  }

  .spg-panel-by-page.spg-panel--padding {
    padding-top: calcSize(2);
    padding-bottom: calcSize(3);
  }

  .spg-theme-group-caption {
    @include ctrDefaultBoldFont;
    color: var(--ctr-property-grid-group-caption-text-color, var(--sjs-layer-1-foreground-100, #000000e6));

    position: relative;
    top: calc(4 * #{$base-unit});
    padding: calc(1 * #{$base-unit}) 0;
    cursor: auto;
  }

  .sv-theme-group_title-action .spg-action-button:hover,
  .sv-theme-group_title-action .spg-action-button:focus {
    background-color: unset;
  }

  .sd-panel__header.sd-element__header .spg-action-bar {
    pointer-events: none;
  }

  .spg-header {
    margin-top: calcSize(-2);
  }

  .sd-question--title-top .spg-paneldynamic {
    --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-spacing-x1));
    margin-top: calc(-1 * var(--thm-ctr-editor-layout-gap));
  }

  .spg-question.spg-row__question:not(.sd-question--title-top):not(.spg-question--boolean),
  .spg-question__content-coloralpha {
    --thm-ctr-property-grid-form-gap: var(--ctr-property-grid-form-gap, var(--sjs-spacing-x2));
    --thm-ctr-editor-layout-gap: var(--ctr-editor-layout-gap, var(--sjs-spacing-x1));
    margin-top: calc(var(--thm-ctr-editor-layout-gap) - var(--thm-ctr-property-grid-form-gap));
  }

  .spg-row--multiple .spg-question.spg-row__question:not(.sd-question--title-top) {
    margin-top: 0;
  }

  .spg-question-composite__content .spg-row:first-of-type {
    margin-top: var(--ctr-editor-layout-gap, var(--sjs-spacing-x1));
  }
}

.svc-side-bar--mobile .spg-theme-builder-root {
  .spg-nested-panel__content::after {
    width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
    left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
  }
}
